<template>
  <van-tabbar v-model="active" fixed route>
    <van-tabbar-item name="home" to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="product" to="/product" icon="shop-o">商品</van-tabbar-item>
    <van-tabbar-item name="cart" to="/cart" icon="cart-o" :badge="cartBadge">购物车</van-tabbar-item>
    <van-tabbar-item name="order" to="/order" icon="orders-o">订单</van-tabbar-item>
    <van-tabbar-item name="mine" to="/mine" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useCartStore } from '@/stores/cart'

const route = useRoute()
const cartStore = useCartStore()

// 设置当前激活的标签页
const active = ref('')

// 根据当前路由设置激活的标签页
watchEffect(() => {
  const path = route.path
  if (path.startsWith('/home')) {
    active.value = 'home'
  } else if (path.startsWith('/product') && !path.includes('/product/')) {
    active.value = 'product'
  } else if (path.startsWith('/cart')) {
    active.value = 'cart'
  } else if (path.startsWith('/order') && !path.includes('/order/')) {
    active.value = 'order'
  } else if (path.startsWith('/mine')) {
    active.value = 'mine'
  }
})

// 购物车徽标显示
const cartBadge = computed(() => {
  const count = cartStore.totalCount
  return count > 0 ? count : ''
})
</script>

<style lang="scss">
// TabBar 样式定制（使用全局样式，不使用scoped）
.van-tabbar {
  height: 50px;
  border-top: 1px solid #f5f5f5;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05);
}

.van-tabbar-item {
  color: #969799;
}

.van-tabbar-item--active {
  color: #1989fa;
}
</style> 